/*
 * @Author: Await
 * @Date: 2025-05-06 17:10:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 17:10:35
 * @Description: 主题视觉映射配置组件
 */
import React from 'react';
import {
  Row,
  Col,
  Typography,
  ColorPicker,
  Divider,
  InputNumber,
  Select,
  Slider,
  Card,
  Tooltip,
  Switch,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import type { ThemeConfig } from '../../../types/chartTypes';

const { Title, Text } = Typography;
const { Option } = Select;

interface VisualMapConfigProps {
  value: ThemeConfig;
  onChange: (newValue: any) => void;
}

/**
 * 主题视觉映射配置组件
 * 包含连续型、分段型视觉映射的配置
 */
const VisualMapConfig: React.FC<VisualMapConfigProps> = ({ value, onChange }) => {
  // 初始化视觉映射配置
  const visualMap = value.visualMap || {
    continuous: {
      inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d'],
        symbolSize: [20, 100],
        opacity: [0.2, 1],
      },
      textStyle: {
        color: '#333',
      },
    },
    piecewise: {
      inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d'],
      },
      textStyle: {
        color: '#333',
      },
    },
  };

  // 更新连续型视觉映射颜色
  const updateContinuousColor = (index: number, color: string) => {
    const newColors = [...(visualMap.continuous.inRange.color || [])];
    newColors[index] = color;
    
    onChange({
      ...value,
      visualMap: {
        ...visualMap,
        continuous: {
          ...visualMap.continuous,
          inRange: {
            ...visualMap.continuous.inRange,
            color: newColors,
          },
        },
      },
    });
  };

  // 更新分段型视觉映射颜色
  const updatePiecewiseColor = (index: number, color: string) => {
    const newColors = [...(visualMap.piecewise.inRange.color || [])];
    newColors[index] = color;
    
    onChange({
      ...value,
      visualMap: {
        ...visualMap,
        piecewise: {
          ...visualMap.piecewise,
          inRange: {
            ...visualMap.piecewise.inRange,
            color: newColors,
          },
        },
      },
    });
  };

  // 更新连续型视觉映射符号大小
  const updateSymbolSize = (sizeType: 'min' | 'max', size: number) => {
    const symbolSize = [...(visualMap.continuous.inRange.symbolSize || [20, 100])];
    const index = sizeType === 'min' ? 0 : 1;
    symbolSize[index] = size;
    
    onChange({
      ...value,
      visualMap: {
        ...visualMap,
        continuous: {
          ...visualMap.continuous,
          inRange: {
            ...visualMap.continuous.inRange,
            symbolSize,
          },
        },
      },
    });
  };

  // 更新连续型视觉映射透明度
  const updateOpacity = (opacityType: 'min' | 'max', opacity: number) => {
    const opacityRange = [...(visualMap.continuous.inRange.opacity || [0.2, 1])];
    const index = opacityType === 'min' ? 0 : 1;
    opacityRange[index] = opacity;
    
    onChange({
      ...value,
      visualMap: {
        ...visualMap,
        continuous: {
          ...visualMap.continuous,
          inRange: {
            ...visualMap.continuous.inRange,
            opacity: opacityRange,
          },
        },
      },
    });
  };

  // 更新文字样式
  const updateTextStyle = (type: 'continuous' | 'piecewise', key: string, val: any) => {
    onChange({
      ...value,
      visualMap: {
        ...visualMap,
        [type]: {
          ...visualMap[type],
          textStyle: {
            ...visualMap[type].textStyle,
            [key]: val,
          },
        },
      },
    });
  };

  return (
    <div className="theme-visualmap-config">
      <Card title="连续型视觉映射" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>
              颜色渐变
              <Tooltip title="定义数据映射到颜色的渐变过程，从左到右表示从小到大">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              {(visualMap.continuous.inRange.color || []).map((color, index) => (
                <div key={index}>
                  <ColorPicker
                    value={color}
                    onChange={(color) => updateContinuousColor(index, color.toHexString())}
                    showText
                  />
                  <div style={{ fontSize: 12, color: '#999', marginTop: 4, textAlign: 'center' }}>
                    {index === 0 ? '最小值' : index === (visualMap.continuous.inRange.color || []).length - 1 ? '最大值' : '中间值'}
                  </div>
                </div>
              ))}
            </div>
          </Col>

          <Col span={12}>
            <Title level={5}>
              符号大小范围
              <Tooltip title="定义数据映射到符号大小的范围">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
            <Row gutter={16}>
              <Col span={12}>
                <Text>最小值</Text>
                <InputNumber
                  value={(visualMap.continuous.inRange.symbolSize || [20, 100])[0]}
                  onChange={(val) => updateSymbolSize('min', val as number)}
                  min={0}
                  max={100}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={12}>
                <Text>最大值</Text>
                <InputNumber
                  value={(visualMap.continuous.inRange.symbolSize || [20, 100])[1]}
                  onChange={(val) => updateSymbolSize('max', val as number)}
                  min={0}
                  max={200}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>

          <Col span={12}>
            <Title level={5}>
              透明度范围
              <Tooltip title="定义数据映射到透明度的范围">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
            <Row gutter={16}>
              <Col span={12}>
                <Text>最小值</Text>
                <InputNumber
                  value={(visualMap.continuous.inRange.opacity || [0.2, 1])[0]}
                  onChange={(val) => updateOpacity('min', val as number)}
                  min={0}
                  max={1}
                  step={0.1}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={12}>
                <Text>最大值</Text>
                <InputNumber
                  value={(visualMap.continuous.inRange.opacity || [0.2, 1])[1]}
                  onChange={(val) => updateOpacity('max', val as number)}
                  min={0}
                  max={1}
                  step={0.1}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>

          <Col span={12}>
            <Title level={5}>文字样式</Title>
            <div>
              <Text>字体颜色</Text>
              <ColorPicker
                value={visualMap.continuous.textStyle?.color || '#333'}
                onChange={(color) => updateTextStyle('continuous', 'color', color.toHexString())}
                showText
              />
            </div>
          </Col>
        </Row>
      </Card>

      <Divider style={{ margin: '24px 0' }} />

      <Card title="分段型视觉映射" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>
              颜色系列
              <Tooltip title="定义数据映射到颜色的分段过程">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              {(visualMap.piecewise.inRange.color || []).map((color, index) => (
                <div key={index}>
                  <ColorPicker
                    value={color}
                    onChange={(color) => updatePiecewiseColor(index, color.toHexString())}
                    showText
                  />
                  <div style={{ fontSize: 12, color: '#999', marginTop: 4, textAlign: 'center' }}>
                    {index === 0 ? '最小值' : index === (visualMap.piecewise.inRange.color || []).length - 1 ? '最大值' : `级别${index}`}
                  </div>
                </div>
              ))}
            </div>
          </Col>

          <Col span={12}>
            <Title level={5}>文字样式</Title>
            <div>
              <Text>字体颜色</Text>
              <ColorPicker
                value={visualMap.piecewise.textStyle?.color || '#333'}
                onChange={(color) => updateTextStyle('piecewise', 'color', color.toHexString())}
                showText
              />
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default VisualMapConfig;